<template>
	<div class="view">
		<div class="title-view"><p class="title">{{data.data.name}}</p><p class="close" @click="data.isShow = false">关闭</p></div>
		<div class="main-view">
			<div class="info-view">
				<p class="title">影厅信息</p>
				<div class="detail">
					<p class="item" v-for="item in dimes">影厅{{item.name}}：{{dimesJson(item.did)}}</p>
					<p class="item" >影厅状态：<span :class="data.data.status == 1? 'leisure' : data.data.status == 2? 'clear' : data.data.status == 3? 'using': 'maintain'">{{status}}</span></p>
					<p class="item">容纳人数：{{data.data.maxCapacity}}人</p>
					<p class="item">影厅价格：</p>
				</div>
				<XTableModule :data="moviePriceData"></XTableModule>
			</div>
			<div class="introduce-view" v-if="data.data.status != 3">
				<p class="title">影厅介绍</p>
				<div class="detail">
					<p>影厅包含高清投影仪，ps4游戏机，ktv点歌设备。可容纳人数5人。影厅包含高清投影仪，ps4游戏机，ktv点歌设备。可容纳人数5人。影厅包含高清投影仪，ps4游戏机，ktv点歌设备。可容纳人数5人。</p>
				</div>
			</div>
			<div class="internal-view" v-if="data.data.status != 3">
				<p class="title">影厅内设</p>
				<div class="detail" v-if="internalData.data.length > 0">
					<XImageRollModule 
						:data="internalData"
						@on-click="clickLookImg">
					</XImageRollModule>
				</div>
				<p style="text-align: center;padding: .4rem 0;" v-else>暂无图片</p>
			</div>
			<div class="reserve-view">
				<div>
					<p class="title">影厅预定</p>
					<div class="detail" v-if="reserveData.data.length > 0">
						<XTableModule :data="reserveData"></XTableModule>
					</div>
					<p style="text-align: center;padding: .4rem 0;" v-else>暂无预定</p>
				</div>
			</div>
			<div class="price-view" v-if="data.data.status == 3">
				<p class="title">影厅消费</p>
				<div class="detail" style="padding-bottom: 0">
					<table width="100%">
						<tbody>
							<tr>
								<td class="td">姓名：</td>
								<td>{{costDetailData.name}}</td>
								<td class="td">人数：</td>
								<td>{{costDetailData.number}}</td>
							</tr>
							<tr>
								<td class="td">开厅时间：</td>
								<td>{{startTime}}</td>
								<td class="td">使用时长：</td>
								<td>{{costDetailData.hours}}小时</td>
							</tr>
							<tr>
								<td class="td">结束时间：</td>
								<td>{{endTime}}</td>
								<td class="td">剩余时长：</td>
								<td>{{costDetailData.minutes < 0? '超时': formatHours(costDetailData.minutes)}}</td>
							</tr>
							<tr>
								<td class="td">已消费：</td>
								<td>{{costDetailData.cost}}</td>
								<td class="td">支付状态：</td>
								<td>{{payStatus}}</td>
							</tr>
						</tbody>
					</table>
				</div>
			</div>
			<div class="consume-view" v-show="data.data.status == 3">
				<p class="title">酒水消费</p>
				<div class="detail" v-if="consumeData.data.length > 0">
					<XTableModule :data="consumeData"></XTableModule>
				</div>
				<p style="text-align: center;padding: .4rem 0;" v-else>暂无酒水消费</p>
			</div>
			<div class="save-view" v-if="data.data.status == 3">
				<p class="title">客存信息<span class="save-action" @click="clickTake" v-if="saveData.data.length > 0">全部取出</span></p>
				<div class="detail" v-if="saveData.data.length > 0">
					<XTableModule :data="saveData"></XTableModule>
				</div>
				<p style="text-align: center;padding: .4rem 0;" v-else>暂无客存</p>
			</div>
		</div>
		<div class="action-view">
			<div class="">
				<Button type="primary" @click="clickAction('开厅')" v-if="data.data.status == 1 && moviePriceData.data.length > 0">开厅</Button>
				<Button type="primary" @click="clickAction('续时')" v-if="data.data.status == 3">续时</Button>
				<Button type="primary" @click="clickAction('转厅')" v-if="data.data.status == 3">转厅</Button>
				<Button type="primary" @click="clickAction('结算')" v-if="data.data.status == 3">结算</Button>
				<Button type="primary" @click="clickAction('维修')" v-if="data.data.status != 4">维修</Button>
				<Button type="primary" @click="clickAction('置闲')" v-if="data.data.status != 1">置闲</Button>
			</div>
		</div>
		<!-- 查看大图 -->
		<!-- <div v-if="data.data.internalData.isShow">
			<XImageViewModal
				:data="data.data.internalData">
			</XImageViewModal>
		</div> -->
	</div>
</template>

<script>
import roomService from '@/network/service/roomService.js'
import saveService from '@/network/service/saveService.js'
import XImageRollModule from '@/pages/movie/view/XImageRollModule' //影厅内设图片
import XImageViewModal from '@/pages/movie/view/XImageViewModal' // 查看大图
import XTableModule from '@/components/XTableModule' //表格
import {formatTimestamp, formatHoursMin} from '@/common/js/date_util.js'

export default {
	props: ['data', 'dimes'],
	components: {
		XImageRollModule,
		XImageViewModal,
		XTableModule
	},
	data() {
		return {
			moviePriceData: {
				title: ['时间段', '价格(元)'],
				data: []
			},
			reserveData: {
				title: ['时间段', '姓名', '电话', '人数'],
				data: []
			},
			consumeData: {
				title: ['名称', '单价', '数量', '金额', '状态'],
				data: []
			},
			saveData: {
				title: ['商品名称', '商品数量'],
				data: [],
				did: '',
			},
			internalData: {
				isShow: false,
				data: {
					index: 0,
					smallList: []
				}
			},
			costDetailData: {}
		}
	},
	computed: {
		status() {
			let data = this.data.data;
			let status = '';
			if (data.status == 1) {
				status = '空闲中';
			} else if (data.status == 2) {
				status = '清理中';
			} else if (data.status == 3) {
				status = '使用中';
			} else if (data.status == 4) {
				status = '维修中';
			}
			return status;
		},
		payStatus() {
			let data = this.costDetailData;
			let payStatus = '';
			if (data.payStatus == 0) {
				payStatus = '未支付';
			} else if (data.payStatus == 1) {
				payStatus = '已支付';
			} else if (data.payStatus == 2) {
				payStatus = '支付失败';
			} else if (data.payStatus == 3) {
				payStatus = '支付取消';
			} else if (data.payStatus == 4) {
				payStatus = '支付超时';
			}
			return payStatus;
		},
		startTime() {
			return formatTimestamp(this.costDetailData.startTime);
		},
		endTime() {
			return formatTimestamp(this.costDetailData.endTime);
		},
		
	},
	watch: {
		'data.data.name': function(val) {
			this.getRoomInfo();
			this.getRoomBookList();
			if (this.data.data.status == 3) {
				this.roomCostDetail();
				this.roomGoodsList();
			}
			this.roomTodayPriceList();
		}
	},
	mounted() {
		this.getRoomInfo();
		this.getRoomBookList();
		if (this.data.data.status == 3) {
			this.roomCostDetail();
			this.roomGoodsList();
		}
		this.roomTodayPriceList();
	},
	methods: {
		formatHours(val) {
			let time = ''
			if (val < 60) {
				time = val + '分';
			} else {
				time = Math.floor(val/60) + "小时" + (val%60) + "分"
			}
			return time
		},
		dimesJson(val) {
			let json = JSON.parse('{'+ this.data.data.dimes +'}');
			return json[val]
		},
		clickLookImg(autoplay) {
			this.data.data.internalData.autoplay = autoplay;
			this.data.data.internalData.isShow = true;
		},
		clickTake() {
			this.upStorage();
		},
		clickAction(type) {
			this.$emit('on-click-action', type, this.data.data);
		},

		getRoomInfo() {
			roomService.getRoomInfo(this.data.data.rid).then(res => {
				let result = res.data;
				let code = result.rescode;
				let resmsg = result.msg;
				if (code == 100) {
					// console.log(result.data);
					if (result.data.imgUrl != null) {
						this.internalData.data.smallList = JSON.parse(result.data.imgUrl);
					}
				} else {
					this.$Message.error(resmsg);
				}
			},error => {
				this.$Message.error('服务器异常，请稍后再试')
			})
		},
		getRoomBookList() {
			roomService.getRoomBookList(this.data.data.rid).then(res => {
				let result = res.data;
				let code = result.rescode;
				let resmsg = result.msg;
				if (code == 100) {
					this.reserveData.data = [];
					result.data.map(item => {
						let obj = {
							time: formatHoursMin(item.startTime) + '-' + formatHoursMin(item.endTime),
							name: item.name,
							phone: item.phoneNum,
							num: item.number
						}
						this.reserveData.data.push(obj);
					})
				} else {
					this.$Message.error(resmsg);
				}
			},error => {
				this.$Message.error('服务器异常，请稍后再试')
			})
		},
		roomGoodsList() {
			roomService.roomGoodsList(this.data.data.rid).then(res => {
				let result = res.data;
				let code = result.rescode;
				let resmsg = result.msg;
				if (code == 100) {
					this.consumeData.data = [];
					result.data.map(item => {
						let obj = {
							name: item.name,
							money: item.money,
							number: item.number,
							sum: item.money * item.number,
							status: item.status == 0? '未支付': item.status == 1? '已支付': item.status == 2? '支付失败': item.status == 3? '支付取消': item.status == 4? '支付超时': '-/-'
						}
						this.consumeData.data.push(obj)
					})
				} else {
					this.$Message.error(resmsg);
				}
			}, error => {
				this.$Message.error('服务器异常，请稍后再试');
			})
		},
		roomCostDetail() {
			roomService.roomCostDetail(this.data.data.rid).then(res => {
				let result = res.data;
				let code = result.rescode;
				let resmsg = result.msg;
				if (code == 100) {
					this.costDetailData = result.data;
					this.getSaveList(result.data.phoneNum)
				} else {
					this.$Message.error(resmsg);
				}
			},error => {
				this.$Message.error('服务器异常，请稍后再试')
			})
		},
		roomTodayPriceList() {
			roomService.roomTodayPriceList(this.data.data.rid).then(res => {
				let result = res.data;
				let code = result.rescode;
				let resmsg = result.msg;
				if (code == 100) {
					this.moviePriceData.data = [];
					if (result.data != [] && result.data != null) {
						this.moviePriceData.data = [];
						result.data.map(item => {
							let obj = {
								time: item.startTime + '-' + item.endTime,
								price: item.price,
							}
							this.moviePriceData.data.push(obj);
						})
					}
				} else {
					this.$Message.error(resmsg);
				}
			},error => {
				this.$Message.error('服务器异常，请稍后再试')
			})
		},
		getSaveList(phoneNum) {
			let params = {
				page: 0,
				pageSize: 1000,
				selectName: phoneNum
			}
			saveService.getStorageList(params).then(res => {
				let result = res.data;
				let code = result.rescode;
				let resmsg = result.msg;
				if (code == 100) {
					this.saveData.data = [];
					if (result.data != null) {
						result.data[0].rcustomerStorageCommodityBean.map(item => {
							let obj = {
								productName: item.productName,
								number: item.number,
							}
							this.saveData.data.push(obj);
						})
						this.saveData.did = result.data[0].did;
					}
				} else {
					this.saveData.data = [];
				}
			}, error => {
				this.$Message.error('服务器异常，请稍后再试')
			})
		},
		upStorage() {
			saveService.upStorage(this.saveData.did).then(res => {
				let result = res.data;
				let code = result.rescode;
				let resmsg = result.msg;
				if (code == 100) {
					this.saveData.data = [];
					this.$Message.success('客存已取出');
				} else {
					this.$Message.error(resmsg);
				}
			}, error => {
				this.$Message.error('服务器异常，请稍后再试')
			})
		},
	}
}
</script>

<style scoped lang="less">
.view {
	width: 5rem;
	height: 100%;
	position: relative;
	.title-view {
		width: 100%;
		background: rgba(255,255,255,0.3);
		border-radius: .08rem .08rem 0 0;
		color: #fff;
		text-align: center;
		height: .5rem;
		line-height: .5rem;
		position: relative;
		.close {
			position: absolute;
			top: 0;
			right: 0;
			padding: 0 .2rem;
			color: #5cadff;
			cursor: pointer;
		}
	}
	.main-view {
		width: 5rem;
		position: absolute;
		top: .5rem;
		bottom: 1rem;
		background: rgba(255,255,255,0.1);
		padding: .2rem;
		overflow: auto;
		.title {
			font-size: .18rem;
			color: #fff;
			padding: .1rem 0;
			border-bottom: 1px solid rgba(255,255,255,0.4)
		}
		.detail {
			display: flex;
			flex-wrap: wrap;
			color: #fff;
			padding: .2rem;
			.td {
				text-align: right;
			}
			td {
				padding-bottom: .2rem;
			}
		}
		.info-view {
			.item {
				width: 50%;
				margin-bottom: .1rem;
				margin-top: .1rem
			}
		}
	}
	.save-view {
		.title {
			position: relative;
			.save-action {
				position: absolute;
				right: .2rem;
				color: #0CA0FF;
				cursor: pointer;
				&:active {
					color: #5cadff;
				}
			}
		}
	}
	.action-view {
		width: 100%;
		height: 1rem;
		text-align: right;
		line-height: 1rem;
		padding: 0 .2rem;
		position: absolute;
		bottom: 0rem;
		background: rgba(255,255,255,0.1);
		border-radius: 0 0 .08rem .08rem;
	}
}
.leisure {
	color: #74CE6B;
}
.using {
	color: #EF8B22;
}
.clear {
	color: #5CABF3;
}
.maintain {
	color: #B6BACE;
}
</style>